<template>
  <div class="loginForm">
    <el-form :model="form" :rules="rules" ref="form">
      <!-- 用户名/手机 -->
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名/手机 " @focus="clearVal('username')"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="密码"
          type="password"
          @focus="clearVal('password')"
        ></el-input>
      </el-form-item>

      <!-- 忘记密码 -->
      <div class="forgetPassword">
        <a href="javascript:;">忘记密码</a>
      </div>

      <!-- 登录 -->
      <el-form-item>
        <el-button type="primary" @click="loginSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mutations } from "../../store/user";

export default {
  data() {
    return {
      form: {
        username: "13800138000",
        password: "123456"
      },

      rules: {
        username: [
          {
            required: true,
            message: "请输入正确的用户名/手机",
            trigger: "blur"
          },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur"
          }
          // { pattern: "^d+$", message: "用户名只能输入数字", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    loginSubmit() {
      this.$refs.form.validate((isPass, objNotPass) => {
        if (isPass) {
          // this.$axios({
          //   url: "/accounts/login",
          //   method: "POST",
          //   data: this.form
          // }).then(res => {
          //   console.log("登录的返回结果", res);
          //   this.$store.commit('user/setUserInfo',res.data);
          // });

          // 将登录请求封装到vuex中是方便登陆功能的复用
          // 但mutations无法接收异步请求的实现
          // 这里直接调用vuex 的actions即可
          // 调用mutations使用commit
          // 调用actions使用dispatch

          this.$store
            .dispatch("user/login", this.form)
            .then(res => {
              console.log('调用vuex内部的axios返回的promise和结果res',res);

              // 弹出登录成功
              this.$message.success('登录成功');

              // 假设当前页是登录页才跳转到主页
              if (this.$route.path === "/user/login") {
                this.$router.push("/");
              }
            })
            .catch(error => {
              console.log("错误结果", error);
            });
        } else {
          console.log(objNotPass);
        }
      });
    },

    clearVal(propName) {
      // 如果拿到一个数据的prop名字
      // 就可以直接调用表单，来清理对应数据的错误信息
      this.$refs.form.clearValidate(propName);
    }
  }
};
</script>

<style lang="less" scoped>
.loginForm {
  width: 400px;
  background-color: #fff;
  border-radius: 0 16px 16px 0;
  background-color: rgba(235, 229, 228, 0.5);

  .el-form {
    position: relative;
    top: 90px;
    padding: 30px;

    .forgetPassword {
      position: relative;
      left: 288px;
      font-size: 12px;
      color: #409eff;
      padding-bottom: 6px;
    }
  }

  .el-button {
    width: 100%;
  }
}
</style>